<template>
    <div>
        <el-dialog title="系统设置" v-dialogDrag :visible.sync="settingDialog" width="476px" center :close-on-click-modal="false" :append-to-body="true">
            <div class="system_setup">
                <el-form ref="form" :model="form" label-width="150px" style="padding-left: 38px">
                    <el-form-item label="游戏分辨率设置：">
                        <el-select v-model="form.gameResolution" @focus="setMinWidth" style="width: 217px">
                            <el-option :style="{ 'min-width': minWidth + -3 + 'px' }" label="800*600" value="0">800*600</el-option>
                            <el-option :style="{ 'min-width': minWidth + -3 + 'px' }" label="900*600" value="1">900*600</el-option>
                            <el-option :style="{ 'min-width': minWidth + -3 + 'px' }" label="1024*768" value="2">1024*768</el-option>
                            <el-option :style="{ 'min-width': minWidth + -3 + 'px' }" label="1152*864" value="3">1152*864</el-option>
                            <el-option :style="{ 'min-width': minWidth + -3 + 'px' }" label="1184*666" value="4">1184*666</el-option>
                            <el-option :style="{ 'min-width': minWidth + -3 + 'px' }" label="1280*600" value="5">1280*600</el-option>
                            <el-option :style="{ 'min-width': minWidth + -3 + 'px' }" label="1280*720" value="6">1280*720</el-option>
                            <el-option :style="{ 'min-width': minWidth + -3 + 'px' }" label="1280*768" value="7">1280*768</el-option>
                            <el-option :style="{ 'min-width': minWidth + -3 + 'px' }" label="1280*800" value="8">1280*800</el-option>
                            <el-option :style="{ 'min-width': minWidth + -3 + 'px' }" label="1280*960" value="9">1280*960</el-option>
                            <el-option :style="{ 'min-width': minWidth + -3 + 'px' }" label="1280*1024" value="10">1280*1024</el-option>
                            <el-option :style="{ 'min-width': minWidth + -3 + 'px' }" label="1360*768" value="11">1360*768</el-option>
                            <el-option :style="{ 'min-width': minWidth + -3 + 'px' }" label="1366*768" value="12">1366*768</el-option>
                            <el-option :style="{ 'min-width': minWidth + -3 + 'px' }" label="1400*1050" value="13">1400*1050</el-option>
                            <el-option :style="{ 'min-width': minWidth + -3 + 'px' }" label="1440*900" value="14">1440*900</el-option>
                            <el-option :style="{ 'min-width': minWidth + -3 + 'px' }" label="1440*900" value="15">1600*900</el-option>
                            <el-option :style="{ 'min-width': minWidth + -3 + 'px' }" label="1680*1050" value="16">1680*1050</el-option>
                            <el-option :style="{ 'min-width': minWidth + -3 + 'px' }" label="1776*1000" value="17">1776*1000</el-option>
                            <el-option :style="{ 'min-width': minWidth + -3 + 'px' }" label="1920*1080" value="18">1920*1080</el-option>
                            <el-option :style="{ 'min-width': minWidth + -3 + 'px' }" label="全屏" value="19">全屏</el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="关闭面板操作：" class="setting_label">
                        <el-radio-group v-model="form.closepanelOperation">
                            <div style="margin-top: 12px">
                                <el-radio class="setting_label" label="minimize">最小化界面到系统托盘</el-radio>
                            </div>
                            <div style="margin-top: 16px; margin-bottom: 30px">
                                <el-radio class="setting_label" label="exitProcess">退出程序</el-radio>
                            </div>
                        </el-radio-group>
                    </el-form-item>
                    <!-- =======================================版本================================================== -->
                    <div class="banben">当前版本:4.0.0</div>
                </el-form>
                <div style="text-align: center">
                    <el-button class="button_btn widthHeight" type="primary" @click="setting_queding">确定</el-button>
                    <el-button class="button_close widthHeight" @click="setting_close()">取消</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
  props: {},
  created () { },
  data () {
    return {
      settingDialog: false,//系统设置默认隐藏
      minWidth: '',
      form: {
        gameResolution: '2',
        closepanelOperation: 'minimize',
      },
      boxName: ''
    }
  },
  mounted () {
    this.$EventBus.$on('Resolution', (data) => {
      this.form.gameResolution = data
      this.setting_queding()
    })
    this.$EventBus.$on('Closepanel', (data) => {
      this.form.closepanelOperation = data
      this.setting_queding()
    })
    this.$EventBus.$on('boxName', (data) => {
      this.boxName = data
    })
  },
  methods: {
    // 无数据的情况下，给请选择提示设置最小宽度
    setMinWidth (val) {
      let domEmpty = document.getElementsByClassName('el-select-dropdown__empty')
      if (domEmpty.length > 0) {
        domEmpty[0].style['min-width'] = val.srcElement.clientWidth + -3 + 'px'
      }
      this.minWidth = val.srcElement.clientWidth
    },
    // 确定系统设置
    setting_queding () {
      window.localStorage.setItem('' + this.boxName + 'systemSettingsGameResolution', this.form.gameResolution)//游戏内分辨率
      window.localStorage.setItem('' + this.boxName + 'systemSettingsClosepanelOperation', this.form.closepanelOperation)//最小化还是退出
      this.settingDialog = false
    },
    // 取消系统设置
    setting_close () {
      const Resolution = window.localStorage.getItem('' + this.boxName + 'systemSettingsGameResolution')
      const Closepanel = window.localStorage.getItem('' + this.boxName + 'systemSettingsClosepanelOperation')
      // console.log(Resolution);
      // console.log(Closepanel);
      if (Resolution === null) {
        this.settingDialog = false
        this.form.gameResolution = '2'
      } else {
        this.settingDialog = false
        this.form.gameResolution = Resolution
      }
      if (Closepanel === null) {
        this.settingDialog = false
        this.form.closepanelOperation = 'minimize'
      } else {
        this.settingDialog = false
        this.form.closepanelOperation = Closepanel
      }
    },
  },
  computed: {},
  watch: {},
  components: {},
  beforeDestroy () {//移除监听事件
    this.$EventBus.$off("Resolution")
    this.$EventBus.$off("Closepanel")
  },
}
</script>

<style scoped lang='less'>
/deep/ .el-dialog__body {
    height: 100% !important;
    padding: 45px 0px !important;
    background: url('@/assets/dialogImg/SystemSetup_bg.png');
}
/deep/.el-form-item__label {
    color: #f1e4c8;
}
/deep/.el-radio__input.is-checked + .el-radio__label {
    color: #f1e4c8;
}
/deep/.el-radio {
    color: #f1e4c8;
    background: transparent;
}
/deep/.el-radio__inner {
    background: transparent;
}
/deep/.el-radio__input.is-checked .el-radio__inner {
    border-color: #f1e4c8;
    background: #000;
}
/deep/.el-radio__inner::after {
    width: 6px;
    height: 6px;
    background-color: #f1e4c8;
}
.widthHeight {
    width: 90px !important;
    height: 38px !important;
}
.banben {
    width: 100px;
    position: relative;
    top: 27px;
    left: -20px;
    color: #f1e4c8;
}
</style>

